<style scoped>
.pro-detail-content{
    padding: 20px 0 ;
}
.cropper-wrapper {
    margin-top: 10px;
	height: 400px;
}
.cropper-box{
    height: 300px;
}
.btn {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #c0ccda;
        color: #1f2d3d;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin:20px 10px 0px 0px;
        padding: 9px 15px;
        font-size: 14px;
        border-radius: 4px;
        color: #fff;
        background-color: #50bfff;
        border-color: #50bfff;
        transition: all .2s ease;
        text-decoration: none;
        user-select: none;
}
.picbox{
    margin-bottom: 20px;
}
</style>
<style>
.header-pic img{
    display: block;
    width: 100%;
    cursor:pointer;
}
</style>

<template>
  <div class="pro-detail">
        <product-title></product-title>
        <div class="pro-detail-content">
            <Row>
                <Col span="8" offset="1">
                    <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="100">
                        <Form-item label="产品名" prop="name">
                            <Input v-model="formItem.name" placeholder="请输入"></Input>
                        </Form-item>
                        <Form-item label="计划名"  prop="plan">
                            <Input v-model="formItem.plan" placeholder="请输入"></Input>
                        </Form-item>
                        <Form-item label="一级分类"  prop="cate1">
                            <Select v-model="formItem.cate1" :value="formItem.cate1" @on-change="getCatetwo" placeholder="请选择">
                                <Option v-for="item in cateOne" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </Form-item>
                        <Form-item label="二级分类" prop="cate2">
                            <Select v-model="formItem.cate2" :value="formItem.cate2" placeholder="请选择">
                                <Option v-for="item in cateTwo" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </Form-item>
                        <Form-item
                            v-for="(item, index) in formItem.attrs"
                            :key="index"
                            :label="'属性' + (index + 1)"
                            :prop="'items.' + index + '.val'">
                            <Row>
                                <Col span="9">
                                    <Input type="text" v-model="item.name" placeholder="请输入属性名称"></Input>
                                </Col>
                                <Col span="1" style="text-align: center">:</Col>
                                <Col span="9">
                                    <Input placeholder="请输入属性值" v-model="item.val"></Input>
                                </Col>
                                <Col span="4" offset="1">
                                    <Button type="ghost" @click="handleRemove(index)">删除</Button>
                                </Col>
                            </Row>
                        </Form-item>
                        <Form-item>
                            <Row>
                                <Col span="12">
                                    <Button type="primary" long @click="handleAdd" icon="plus-round">新增属性</Button>
                                </Col>
                            </Row>
                        </Form-item>                      
                        <Form-item label="头部展示图">
                            <Row>
                                <Col span="19">
                                    <Card class="header-pic">
                                        <div style="text-align:center">
                                            <img @click="openModal('head')" :src="formItem.header_img">                                            
                                        </div>
                                    </Card>
                                </Col>
                            </Row>
                        </Form-item>
                        
                        <Form-item label="活动图片">
                            <Row v-for="(itempic, index) in formItem.public_imgs" :key="index" class="picbox">
                                <Col span="19">
                                    <Card  class="header-pic">
                                        <div style="text-align:center">
                                            <img :src="itempic.img" />                                            
                                        </div>
                                    </Card>
                                </Col>
                                <Col span="4" offset="1">
                                    <Button type="ghost" @click="handleRemoveActity(index)">删除</Button>
                                </Col>
                            </Row>
                        </Form-item>
                        <Form-item>
                            <Row>
                                <Col span="12">
                                    <Button type="primary" long @click="openModal('activity')" icon="plus-round">新增活动图片</Button>
                                </Col>                               
                            </Row>
                        </Form-item>
                        <Form-item>
                            <Button type="primary" @click="handleSubmit('formItem')">提交</Button>   
                            <Button type="ghost" style="margin-left: 8px">取消</Button>                        
                        </Form-item>                      
                    </Form>
                    <Modal v-model="modal2" width="1200" ok-text="上传图片" :loading="loading" @on-ok="uploadHeadimg">
                        <Row class="cropper-wrapper">
                            <Col span="11" class="cropper-box">
                                <vueCropper
                                    ref="cropper"
                                    :img="headImg.img"
                                    :outputSize="headImg.size"
                                    :outputType="headImg.outputType"
                                    :info="headImg.info"
                                    :canScale="headImg.canScale"
                                    :autoCrop="headImg.autoCrop"
                                    :autoCropWidth="headImg.width"
                                    :autoCropHeight="headImg.height"
                                    :fixed="headImg.fixed"
                                    :fixedNumber="headImg.fixedNumber"
                                    @realTime="realTime"
                                ></vueCropper>
                                <label class="btn" for="upload2">打开图片</label>
                                <input type="file" id="upload2" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)">
                                <!-- <button @click="finish2('base64')" class="btn">裁剪</button> -->
                            </Col>
                            <Col span="7" offset="1">
                                <!-- <img :src="formItem.headImg.demoimg" /> -->
                                <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}">
                                    <div :style="previews.div">
                                        <img :src="headImg.img" :style="previews.img">
                                    </div>
                                </div>
                            </Col>
                        </Row>                           
                    </Modal>                  
                </Col>
            </Row>
        </div>
        <div class="test">
            
        </div>
  </div>
</template>
<script>
import productTitle from '../../components/productTitle'
import VueCropper from 'vue-cropper'
import { productDetail , productCateOne ,productCateTwo,productDetailSave} from '../../api/product'
export default {
    data () {
        return {
            formItem: {   
            },
            cateOne:[],
            cateTwo:[],
            headImg: {
                    img: '',
                    info: true,
                    size: 1,
                    canScale:true,
                    outputType: 'jpeg',
                    autoCrop: true,
                    // 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 300,
                    autoCropHeight: 250,
                    // 开启宽度和高度比例
                    fixed: true,
                    fixedNumber: [2, 1],
                    demoimg:'',
            },
            modal2: false,
            loading: true,
            imageType:'head',
            previews: {},
            ruleValidate: {
                name: [
                    { required: true, message: '产品名不能为空', trigger: 'blur' }
                ],
                plan: [
                    { required: true, message: '计划名不能为空', trigger: 'blur' },                  
                ],
                cate1: [
                    { required: true, message: '请选择一级分类', trigger: 'change' }
                ],
                cate2: [
                    { required: true, message: '请选择二级分类', trigger: 'change' }
                ]
            } 
        }
    },
    components: {
        productTitle,
        VueCropper
    },
    mounted () {
        this.getCateOne ()
        
           
    },
    created () {
        this.getDetailInfo ()
    },
    watch: {
        '$route' (to, from) {
      // 对路由变化作出响应...
        this.getDetailInfo ()
        }
    },
    methods: {
            getDetailInfo () {                
                var _info = {
                    mongo_id:this.$route.params.id,
                }
                new Promise((resolve, reject) => {
                    productDetail(_info).then(response => {
                        console.log(response.data.data)
                        if(response.data.err==0){
                            this.formItem = response.data.data
                            this.getCatetwo ()
                        }                            
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            getCateOne () {
                var _cateone ={
                    yun_id:1
                }
                new Promise((resolve, reject) => {
                    productCateOne(_cateone).then(response => {
                        if(response.data.err==0){
                             this.cateOne = response.data.data                            
                        }                            
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            getCatetwo () {
                var _cateTwo = {
                    mongo_id:this.formItem.cate1
                }
                new Promise((resolve, reject) => {
                    productCateTwo(_cateTwo).then(response => {
                        if(response.data.err==0){
                             this.cateTwo = response.data.data
                        }                            
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        console.log(this.formItem)
                        delete this.formItem['_id']
                        new Promise((resolve, reject) => {
                            productDetailSave(this.formItem).then(response => {
                                if(response.data.err==0){
                                   this.$Message.success('提交成功!');
                                }else{
                                    this.$Message.error(response.data.info);
                                }                            
                                resolve();
                            }).catch(error => {
                                reject(error);
                            });
                        });                        
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            handleAdd () {
                this.formItem.attrs.push({
                    name:'',
                    val: ''
                });
            },
            handleRemove (index) {
                this.formItem.attrs.splice(index, 1);
            },
            handleRemoveActity(index) {
                 this.formItem.public_imgs.splice(index, 1);
            },
            openModal(type){
                this.modal2 = true
                this.imageType = type
            },
            uploadImg (e) {
                //上传图片
                // this.option.img
                var file = e.target.files[0]
                if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
                    alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
                    return false
                }
                var reader = new FileReader()
                reader.onload = (e) => {
                    this.headImg.img = e.target.result
                }
                reader.readAsDataURL(file)
            },
            // 实时预览函数
            realTime (data) {
                this.previews = data
            },
            finish2 (type) {
                
            },
            uploadHeadimg () {
                this.$refs.cropper.getCropData((data) => {
					if(this.imageType == 'head'){
                        this.formItem.header_img = data
                    }
                    if(this.imageType == 'activity'){
                        this.formItem.public_imgs.push({
                            img:data
                        })
                    }
				})
                
                this.modal2 = false;
                
            }
        }
}
</script>

